import Taro, {Component} from '@tarojs/taro'
import {View, Text ,Image, Picker,Button } from '@tarojs/components'

import {
  AtInput , AtTextarea , AtSwitch , AtFloatLayout
} from 'taro-ui'

import './addReceiveAddress.scss'
import BasePage from "../basePage";

import arrowImage from '../../image/ic_arrow_right.png'

// import regionList from '../../utils/region.json'
import DataManager from "../../utils/DataManager";

let isCommitEnable = true;

export default class addReceiveAddress extends BasePage{

  config = {
    navigationBarTitleText: '添加收货地址'
  }

  onPullDownRefresh(){
    Taro.stopPullDownRefresh();
  }

  constructor(props) {
    super(props)
    this.state = {
      inputName:'',
      inputMobileNumber : '',
      inputMainAdd:'请选择',
      mainAddList:[],
      inputExactAdd:'',
      isDefaultAdd:false,
      showRegion:false,
      currentRegionList:[],
      regionType:0 , //  当前数据的省市区type  type 0 省  1市  2区
      currentProvince:'' ,// 当前省份
      currentCity:'', // 当前城市
      currentArea:'' , // 当前区
      currentProvinceId : '',
      currentCityId : '',
      currentAreaId : '',
    }
    this.currentCityList = [];
  }

  componentWillMount(){
    this.setState({
      currentRegionList : regionList,
      currentProvinceList:regionList
    })
  }


  onMobileChange = (mobile) =>{
    this.setState({
      inputMobileNumber:mobile
    })
  }

  onName = (name) =>{
    this.setState({
      inputName:name
    })
  }

  onExactAddress = (exactAdd) => {
    this.setState({
      inputExactAdd: exactAdd
    })
  }

  onSwitchChange = (value) =>{

    console.log('value=========' + value)

    this.setState({
      isDefaultAdd: value
    })
  }

  onRegionOpen = () =>{
    this.setState({
      showRegion: true
    })
  }

  onRegionClose = () =>{
    this.setState({
      showRegion: false
    })
  }

  onRegionItemClick = (regionData) =>{
    if (this.state.regionType == 0){
      this.setState({
        currentProvince : regionData.name,
        currentProvinceId : regionData.id,
        regionType:1,
      })
    } else if (this.state.regionType == 1){
      this.setState({
        currentCity : regionData.name,
        currentCityId : regionData.id,
        regionType:2,
      })
    } else if (this.state.regionType == 2){
      this.setState({
        currentArea : regionData.name,
        currentAreaId: regionData.id,
      })
    }
    if (this.state.regionType == 0 || this.state.regionType == 1) {
      for (let i = 0 ; i < this.state.currentRegionList.length ; i++){
        let provice = this.state.currentRegionList[i];
        if (provice.id == regionData.id){
          this.setState({
            currentRegionList : provice.sysRegionList
          })
          if (this.state.regionType == 0){
              this.currentCityList = provice.sysRegionList
          }
        }
      }
    } else {
      setTimeout(()=>{
        this.setState({
          inputMainAdd : this.state.currentProvince + this.state.currentCity + this.state.currentArea,
          showRegion:false
        })
      },100)
    }
  }

  onCurrentProvinceClick = () =>{
    this.setState({
      currentArea:'',
      currentCity:'',
      regionType : 0,
      currentRegionList : regionList
    })
  }

  onCurrentCityClick = () =>{
    let _this = this;
    this.setState({
      currentArea:'',
      regionType : 1,
      currentRegionList : _this.currentCityList
    })
  }

  onSubmit = () =>{
    if (!isCommitEnable){
      return;
    }
    if (!this.state.inputName) {
      Taro.showToast({
        title:'请填写收货人姓名',
        icon:'none'
      })
      return;
    }
    if (!this.state.inputMobileNumber) {
      Taro.showToast({
        title:'请填写手机号码',
        icon:'none'
      })
      return;
    }
    if (!this.state.inputMainAdd) {
      Taro.showToast({
        title:'请选择所在地区',
        icon:'none'
      })
      return;
    }
    if (!this.state.inputExactAdd) {
      Taro.showToast({
        title:'请填写详细地址',
        icon:'none'
      })
      return;
    }
    isCommitEnable = false;

    Taro.request({
      url: 'https://www.vpin.top/a/rest/user/address/saveAddress',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      dataType: 'json',
      data:{
      token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'wechat',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
        provinceId : this.state.currentProvinceId,
        provinceName : this.state.currentProvince,
        cityId:this.state.currentCityId,
        cityName:this.state.currentCity,
        areaId:this.state.currentAreaId,
        areaName:this.state.currentArea,
        userName:this.state.inputName,
        mobile:this.state.inputMobileNumber,
        address:this.state.inputExactAdd,
        isShow:this.state.isDefaultAdd ? 1 : 0
    },
      success: (obj) => {
        if (obj.data.status == 'success') {
          Taro.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 1000
          });
          Taro.navigateBack({delta: 1});
        } else {
          Taro.showToast({
            title: '添加失败',
            icon: 'none',
            duration: 1000
          })
        }
        isCommitEnable = true;
      },
      fail: (obj) => {
        Taro.showToast({
          title: '程序异常',
          icon: 'none',
          duration: 1000
        })
        isCommitEnable = true;
      }
    })
  }

  render(){
    return(
      <View className='add-address-container'>
        <AtInput
          className='add-address-input'
          name='mobileNumber'
          value={this.state.inputName}
          clear
          title='收货人'
          type='text'
          placeholder='请填写收货人姓名'
          border
          maxlength={11}
          onChange={this.onName.bind(this)}
        />
        <AtInput
          className='add-address-input'
          name='mobileNumber'
          value={this.state.inputMobileNumber}
          clear
          title='手机号'
          type='phone'
          placeholder='请填写手机号码'
          border
          maxlength={11}
          onChange={this.onMobileChange.bind(this)}
        />
        <View className='add-address-area-container' onClick={this.onRegionOpen.bind(this)}>
          <Text className='add-address-text'>地区</Text>
          <View className='add-address-area-container-sub'>
            <Text className='add-address-text'>{this.state.inputMainAdd}</Text>
            <Image className='add-address-arrow' src={arrowImage}></Image>
          </View>
        </View>
        <View className='add-address-divider'/>
        <AtInput
          className='add-address-input'
          value={this.state.inputExactAdd}
          title='详细地址'
          maxlength={11}
          type='text'
          placeholder='请填写详细地址'
          onChange={this.onExactAddress.bind(this)}
          focus={false}
          border
        />
        <AtSwitch
          title='设为默认地址'
          checked={this.state.isDefaultAdd}
          onChange={this.onSwitchChange.bind(this)}
          style='font-size:16px;margin-left:20px;'
          border
        />
        <AtFloatLayout
          isOpened={this.state.showRegion}
          onClose={this.onRegionClose.bind(this)}
          title='选择所在地区'
          style='background-color : #ffffff;z-index:10000'
        >
          <View className='add-address-region-add-container'>
            <View className='add-address-region-add-sub'>
              <Text
                className='add-address-region-add-text'
                onClick={this.onCurrentProvinceClick}
              >{this.state.currentProvince}</Text>
              <Text
                className='add-address-region-add-text'
                style='margin-left:10px'
                onClick={this.onCurrentCityClick}
              >{this.state.currentCity}</Text>
              <Text className='add-address-region-add-text' style='margin-left:10px'>{this.state.currentArea}</Text>
            </View>
            <View className='add-address-region-list'>
              {
                this.state.currentRegionList.map(regionItem => {
                  return (
                    <View className='add-address-region-single' onClick={this.onRegionItemClick.bind(this , regionItem)}>
                      <Text className='add-address-region-single-text'>{regionItem.name}</Text>
                    </View>
                  )
                })
              }
            </View>
          </View>
        </AtFloatLayout>
        <View className='post-section' onClick={this.onSubmit.bind(this)}>
          <Button className='add-address-post-commit'>提交</Button>
        </View>
      </View>
    )
  }


}


